<ControlGroup type="toggle" {valign} {labelWidth} {label} {help} {uid} helpClass="mt-1">
    <div class="mt-1">
        <div class="btn-group">
            <ToggleButtonInput
                disabled="{disabled}"
                indeterminate="{indeterminate.bold}"
                bind:value="value.bold"
            >
                <i class="fa fa-fw fa-bold"></i>
            </ToggleButtonInput>
            <ToggleButtonInput
                disabled="{disabled}"
                indeterminate="{indeterminate.italic}"
                bind:value="value.italic"
            >
                <i class="fa fa-fw fa-italic"></i>
            </ToggleButtonInput>
            {#if underline}
            <ToggleButtonInput
                disabled="{disabled}"
                indeterminate="{indeterminate.underline}"
                bind:value="value.underline"
            >
                <i class="fa fa-fw fa-underline"></i>
            </ToggleButtonInput>
            {/if}{#if uppercase}
            <ToggleButtonInput
                disabled="{disabled}"
                indeterminate="{indeterminate.uppercase}"
                bind:value="value.uppercase"
            >
                <i class="fa fa-fw fa-font fa-font-one"></i>
                <i class="fa fa-fw fa-font fa-font-two"></i>
            </ToggleButtonInput>
            {/if} {#if spacing}
            <ToggleButtonInput
                disabled="{disabled}"
                indeterminate="{indeterminate.wide}"
                bind:value="value[keys.wide]"
            >
                <i class="fa fa-text-width fa-fw" aria-hidden="true"></i>
            </ToggleButtonInput>
            {/if}{#if color}
            <ColorPickerInput disabled="{disabled}" reset="{colorReset}" bind:color="value.color">
                <button disabled="{disabled}" class="btn-color btn btn-s">
                    <i class="fa fa-font fa-font-color fa-fw" aria-hidden="true"></i>
                    <div
                        class="color-bar"
                        style="background: {value.color ? value.color : defaultColor }"
                    ></div>
                </button>
            </ColorPickerInput>
            {/if} {#if background}
            <ColorPickerInput
                disabled="{disabled}"
                reset="{backgroundReset}"
                bind:color="value.background"
            >
                <button disabled="{disabled}" class="btn-color btn btn-s">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="18"
                        height="14"
                        viewBox="0 0 24 24"
                    >
                        <path
                            d="M21.143 9.667c-.733-1.392-1.914-3.05-3.617-4.753-2.977-2.978-5.478-3.914-6.785-3.914-.414 0-.708.094-.86.246l-1.361 1.36c-1.899-.236-3.42.106-4.294.983-.876.875-1.164 2.159-.792 3.523.492 1.806 2.305 4.049 5.905 5.375.038.323.157.638.405.885.588.588 1.535.586 2.121 0s.588-1.533.002-2.119c-.588-.587-1.537-.588-2.123-.001l-.17.256c-2.031-.765-3.395-1.828-4.232-2.9l3.879-3.875c.496 2.73 6.432 8.676 9.178 9.178l-7.115 7.107c-.234.153-2.798-.316-6.156-3.675-3.393-3.393-3.175-5.271-3.027-5.498l1.859-1.856c-.439-.359-.925-1.103-1.141-1.689l-2.134 2.131c-.445.446-.685 1.064-.685 1.82 0 1.634 1.121 3.915 3.713 6.506 2.764 2.764 5.58 4.243 7.432 4.243.648 0 1.18-.195 1.547-.562l8.086-8.078c.91.874-.778 3.538-.778 4.648 0 1.104.896 1.999 2 1.999 1.105 0 2-.896 2-2 0-3.184-1.425-6.81-2.857-9.34zm-16.209-5.371c.527-.53 1.471-.791 2.656-.761l-3.209 3.206c-.236-.978-.049-1.845.553-2.445zm9.292 4.079l-.03-.029c-1.292-1.292-3.803-4.356-3.096-5.063.715-.715 3.488 1.521 5.062 3.096.862.862 2.088 2.247 2.937 3.458-1.717-1.074-3.491-1.469-4.873-1.462z"
                        />
                    </svg>
                    <div
                        class="color-bar"
                        style="background: {value.background ? value.background : defaultBackground }"
                    ></div>
                </button>
            </ColorPickerInput>
            {/if}
        </div>
        {#if fontSize}
        <NumberInput
            width="30px"
            slider="{false}"
            disabled="{disabled}"
            unit="{fontSizePercent ? '%' : 'px'}"
            bind:value="value[fontSizeKey]"
            step="{fontSizePercent ? 0.01 : 1}"
            multiply="{fontSizePercent ? 100 : 1}"
            min="0"
            max="{fontSizePercent ? 5 : 50}"
        />
        {/if}
    </div>
</ControlGroup>

<script>
    import ControlGroup from './ControlGroup.html';
    import ToggleButtonInput from './ToggleButtonInput.html';
    import NumberInput from './NumberInput.html';
    import ColorPickerInput from './ColorPickerInput.html';

    export default {
        components: {
            ControlGroup,
            ToggleButtonInput,
            NumberInput,
            ColorPickerInput
        },
        data() {
            return {
                value: {
                    bold: false,
                    italic: false,
                    underline: false,
                    uppercase: false,
                    wide: false,
                    color: '#000000',
                    background: '#ffffff',
                    fontSize: 13,
                    colorReset: false,
                    backgroundReset: false,
                    uid: ''
                },
                indeterminate: {
                    bold: false,
                    italic: false,
                    underline: false,
                    uppercase: false,
                    wide: false,
                    color: false,
                    background: false,
                    fontSize: false
                },
                fontSizeKey: 'fontSize',
                keys: {
                    bold: 'bold',
                    italic: 'italic',
                    underline: 'underline',
                    uppercase: 'uppercase',
                    wide: 'wide',
                    color: 'color',
                    background: 'background'
                },
                disabled: false,
                disabledMessage: '',
                labelWidth: '80px',
                help: false,
                placeholder: '',
                underline: true,
                uppercase: false,
                spacing: false,
                color: false,
                fontSize: false,
                fontSizePercent: false,
                background: false,
                defaultColor: 'transparent',
                defaultBackground: 'transparent',
                valign: 'middle'
            };
        },
        oncreate() {
            // fix default value for font size
            const { fontSizePercent, value } = this.get();
            if (fontSizePercent && value.fontSize === 13) {
                value.fontSize = 1;
                this.set({ value });
            }
        }
    };
</script>

<style>
    .btn-group {
        margin-right: 10px;
    }
    .btn-s {
        padding-left: 5px;
        padding-right: 5px;
    }
    .fa-font-color {
        position: relative;
        top: -3px;
        color: #333;
    }
    .fa-font-one {
        left: -6px;
        top: 0px;
        position: relative;
    }
    .fa-font-two {
        left: 10px;
        top: 4px;
        position: absolute;
    }
    div.color-bar {
        left: 4px;
        right: 4px;
        height: 5px;
        bottom: 3px;
        position: absolute;
        box-shadow: 1px 1px 0px inset rgba(0, 0, 0, 0.1);
    }
    .btn-color {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;
        padding-left: 5px;
        padding-right: 5px;
    }
    :global(.btn-group .color-picker-cont):not(:last-child) .btn-color {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-left: 0;
    }
</style>
